<template>
  <van-nav-bar title="订单详情" left-arrow @click-left="$router.back()">
    <template #right>
      <van-icon name="ellipsis" size="18" />
    </template>
  </van-nav-bar>
  <div class="order_detail">
    <div>
      <span class="des">订单状态：</span>
      <span>{{ orderdetail.orderStatusString }}</span>
    </div>
    <div>
      <span class="des">订单编号：</span>
      <span>{{ orderdetail.orderNo }}</span>
    </div>
    <div>
      <span class="des">下单时间：</span>
      <span>{{ orderdetail.createTime }}</span>
    </div>
    <div>
      <van-button
        type="primary"
        v-if="orderdetail.orderStatusString == '已支付'"
        @click="confirm"
        >确认收货</van-button
      >
      <van-button
        type="primary"
        v-if="orderdetail.orderStatusString == '待支付'"
        @click="gopayment"
        >去支付</van-button
      >
      <van-button
        plain
        type="primary"
        v-if="
          orderdetail.orderStatusString != '交易成功' &&
          orderdetail.orderStatusString != '手动关闭'
        "
        @click="cancelorder"
        >取消订单</van-button
      >
    </div>
  </div>
  <div class="order-price">
    <p>
      <span class="des">商品金额：</span>
      <span>{{ orderdetail.totalPrice }}</span>
    </p>
    <p>
      <span class="des">配送方式：</span>
      <span>普通快递</span>
    </p>
  </div>
  <van-card
    v-for="item in orderdetail.cardgoods"
    :key="item.goodsId"
    :num="item.goodsCount"
    :price="item.sellingPrice"
    desc="全场包邮"
    :title="item.goodsName"
    :thumb="item.goodsCoverImg"
  />
  <van-popup
    v-model:show="popupshow"
    position="bottom"
    round
    :style="{ height: '25%' }"
  >
    <template #default>
      <div class="buy-box">
        <div class="pay" @click="payandgoorder(item)" v-for="item in payment">
          {{ item.name }}
        </div>
        <div class="ancel" @click="cancelpay">取消</div>
      </div>
    </template>
  </van-popup>
</template>
<script setup>
import { ref, onMounted, reactive, computed, nextTick } from "vue";
import { getorderdetail, paysuccess, finish ,cancel} from "@/api/index.js";
import { useRoute } from "vue-router";
import moment from "moment";
import { showSuccessToast, showConfirmDialog } from "vant";
let route = useRoute();
let orderdetail = reactive({
  orderStatusString: "", //订单状态
  orderNo: "", //订单号
  createTime: "", //下单时间
  totalPrice: "", //商品金额
  cardgoods: [], //商品列表
});

let payment = reactive([{ name: "微信支付" }, { name: "支付宝支付" }]); //支付方式
let popupshow = ref(false); //控制弹出层显示隐藏

onMounted(() => {
  getdata();
});

let getdata = () => {
  getorderdetail(route.query.id).then((res) => {
    if (res.resultCode == 200) {
      orderdetail.orderStatusString = res.data.orderStatusString;
      orderdetail.orderNo = res.data.orderNo;
      orderdetail.createTime = moment(res.data.createTime).format(
        "YYYY-MM-DD HH:mm"
      );
      orderdetail.totalPrice = res.data.totalPrice;
      orderdetail.cardgoods = res.data.newBeeMallOrderItemVOS;
    }
  });
};
//点击确认收货
let confirm = () => {
  showConfirmDialog({
    title: "确认收货",
    message:
      "是否确认收货",
  })
    .then(() => {
      finish(route.query.id).then((res) => {
        if (res.resultCode == 200) {
            getdata();
        }
      });
    })
    .catch(() => {
        return
    });
};
//点击去支付
let gopayment = () => {
  popupshow.value = true;
};
//点击取消订单
let cancelorder=()=>{
    showConfirmDialog({
    title: "取消订单",
    message:
      "是否取消订单",
  })
    .then(() => {
      cancel(route.query.id).then((res) => {
        if (res.resultCode == 200) {
            getdata();
        }
      });
    })
    .catch(() => {
        return
    });
}
//点击支付方式
let payandgoorder = (item) => {
  if (item.name == "微信支付") {
    paysuccess(route.query.id, 1).then((res) => {
      if (res.resultCode == 200) {
        showSuccessToast("微信支付成功");
        setTimeout(() => {
          popupshow.value = false;
          getdata();
        }, 500);
      }
    });
  } else {
    paysuccess(route.query.id, 2).then((res) => {
      if (res.resultCode == 200) {
        showSuccessToast("支付宝支付成功");
        setTimeout(() => {
          popupshow.value = false;
          getdata();
        }, 500);
      }
    });
  }
};
// 点击取消支付
let cancelpay = () => {
  popupshow.value = false;
};

</script>
<style lang="less" scoped>
.order_detail {
  padding: 0.5rem;
  font-size: 0.4rem;
  div {
    margin-bottom: 0.26667rem;
    .des {
      color: #999;
    }
  }
  .van-button {
    width: 100%;
    margin-bottom: 0.1rem;
  }
}
.order-price {
  padding: 0.5rem;
  font-size: 0.4rem;
  border-bottom: 0.5rem solid #f7f7f7;
  border-top: 0.5rem solid #f7f7f7;
  .des {
    color: #999;
  }
}
.buy-box {
  height: 100%;
  .pay {
    height: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 3px solid #f7f8fa;
  }
  .ancel {
    height: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 5px solid #f7f8fa;
  }
}
</style>
